<template>
  <a-layout class="pageAll">
    <a-page-header
        title="回调列表"
        style="border: 1px solid rgb(235, 237, 240)"
        sub-title="回调的数据列表"
    >
      <div class="flex-row-start-center time-contain">
        <div>起始：</div>
        <a-date-picker :value="start" class="time-item" :format="dateFomart" :locale="locale"
                       @change="handleDateChange($event,0)"
                       style="margin-right: 15px"/>
        ~
        <div style="margin-left: 15px">结束：</div>
        <a-date-picker :value="end" :format="dateFomart" :locale="locale" class="time-item"
          @change="handleDateChange($event,1)"
        />
        <a-button class="ml15" type="primary" @click="onSearch">查询</a-button>
      </div>
<!--      分组数统计-->
      <div class="flex-row-start-center" style="margin-bottom: 10px">
        <div>回调总数:{{pagination.total}}</div>
      </div>

      <a-table :columns="columns" :data-source="dataSource" bordered :pagination="pagination" :loading="loading"
               @change="handleTableChange"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key == 'useable'">
            <div>{{record.useable != '0'?'是':'否'}}</div>
          </template>
          <template v-if="column.key == 'platform'">
            <div>{{record.platform == '1'?'iOS':'安卓'}}</div>
          </template>
          <template v-if="column.key == 'hadcall'">
            <div>{{record.hadcall && record.hadcall == '1'?'已回调':'未回调'}}</div>
          </template>
          <template v-if="column.key == 'ts'">
            <div>{{getformatDate(record.ts)}}</div>
          </template>
          <template v-if="column.key == 'option'">
            <a-button :disabled="record.hadcall == '1'" type="primary" @click="sendCallBack(record)" :loading="record.loading">发送回调</a-button>
          </template>
        </template>
      </a-table>
    </a-page-header>
    <a-modal v-model:visible="showMode" title="温馨提示" cancel-text="取消"
             @ok="sureSend"
    >
      <p>确定要发送回调给客户？</p>
    </a-modal>
  </a-layout>
</template>

<script>
import {callList,updateRecordeHadCall} from "@/utils/api";
import dayjs from 'dayjs'
import locale from 'ant-design-vue/es/locale/zh_CN'

export default {
  name: "call-list",
  computed:{
    getformatDate () {
      return (timestamp) => {
        if (!timestamp) return ""
        var date = new Date(parseInt(timestamp));
        var year = date.getFullYear();
        var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的
        var day = ('0' + date.getDate()).slice(-2);
        var hours = ('0' + date.getHours()).slice(-2);
        var minutes = ('0' + date.getMinutes()).slice(-2);
        var seconds = ('0' + date.getSeconds()).slice(-2);
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
    }
  },
  data() {
    return {
      columns:[
        {
          title: "序号",
          align: "center",
          customRender: ({ text, record, index }) => {
            return `${(index + 1) + (this.pagination.current - 1) * this.pagination.pageSize}`;
          }
        },
        {title: '链接名',dataIndex: 'urldesc',key: 'urldesc'},
        {title: '链接描述',dataIndex: 'remark',key: 'remark'},
        {title: '是否可用',dataIndex: 'useable',key: 'useable'},
        {title: '平台',dataIndex: 'platform',key: 'platform'},
        {title: 'chuang',dataIndex: 'ts',key: 'ts'},
        {title: '回调时间',dataIndex: 'call_time',key: 'call_time'},
        {title: '分组',dataIndex: 'group_id',key: 'group_id'},
        {title: '操作',dataIndex: 'option',key: 'option'}
      ],
      dataSource:[],
      pagination: {
        current: 1,
        total:0,
        pageSize: 20
      },
      loading: false,
      showMode:false,
      optionRecord:null,//操作数据
      start:'',//查询起始时间
      end: '',//查询结束时间
      dateFomart: "YYYY-MM-DD",
      groupCount:[{
        group:1,
        count:0
      },{
        group:2,
        count:0
      },{
        group:3,
        count:0
      },{
        group:4,
        count:0
      }],
      dayjs,
      locale
    }
  },
  created() {
    this.start = dayjs(this.dealTime(6),"YYYY-MM-DD");
    this.end = dayjs(this.dealTime(9),"YYYY-MM-DD");
    this.loadList(this.pagination.current)
  },
  methods: {
    onSearch() {
      this.pagination.current = 1;
      this.loadList(1)
    },
    handleTableChange(page) {
      this.pagination.pageSize = page.pageSize
      this.pagination.current = page.current
      this.loadList(page.current)
    },
    loadList(page) {

    // .format("YYYY-MM-DD")
      console.log("=---------------------",this.start.format("YYYY-MM-DD"),this.end)

      let param = {
        page: page,
        pageSize: this.pagination.pageSize,
        start: this.start.format(),
        end: this.end.format()
      }
      this.loading = true;
      callList({
        method: 'GET',
        params: param
      }).then(res => {
        this.loading = false;
        let data = res.data.data;
        this.dataSource = data.list
        this.pagination.total = data.total
      },fail => {
        this.loading = false;
      })
    },
    sendCallBack(record) {
      this.optionRecord = record;
      this.showMode = true
    },
    sureSend() {
      this.showMode = false

      this.optionRecord.loading = true;
      let param = {
        dataId: this.optionRecord.dataId
      }
      updateRecordeHadCall({
        method: "GET",
        params: param
      }).then(res => {
        this.optionRecord.loading = false
        this.loadList(this.pagination.current)
      },fail => {
        this.optionRecord.loading = false
      })
    },
    //  今天昨天明天时间处理 v==3为昨天。v==6为今天。v==9为明天
    dealTime(v){
      let b = 24*60*60*1000   //一天的时间
      let day = new Date();  //当天的时间

      v == 3 ? day.setTime(day.getTime()-b) : v == 6 ?
          day.setTime(day.getTime()) : day.setTime(day.getTime() + b);

      let dayMon=(day.getMonth() + 1) >= 10 ? day.getMonth()+1 : '0' + (day.getMonth() + 1)
      let dayDat= day.getDate() >= 10 ? day.getDate() : '0' + (day.getDate())

      let s = day.getFullYear() + "-" + dayMon + "-" + dayDat;
      return s;
    },
    // 面板变更时记录下所选时间
    handlePanelChange(value, mode) {
      this.currentDate = value
    },
    // 时间发生变化时回调
    handleDateChange (e,type) {
      if (type == 0) {
        this.start = e
      }else {
        this.end = e
      }
    },
  }
}
</script>

<style scoped>
    .time-contain {
      display: flex;
      align-content: center;
      text-align: center;
      margin: 30px;
    }
   .time-item {
     width: 35%;
   }
</style>